<script setup lang="ts">
import LargeDataViewer from '@/components/LargeDataViewer.vue'
type User = {
  id: number
  name: string
  email: string
}
const items: User[] = Array.from({ length: 1000 }, (_, i) => ({
  id: i,
  name: `User ${i}`,
  email: `user${i}@example.com`
}))
</script>

<template>
  <div class="notify-page">
    <h4>
      后端返回一万条数据渲染
      因为数据过多，ul>所以导致页面渲染的dom过多，页面卡顿
    </h4>
    <h5>长列表性能优化</h5>
    <div>
      <RecycleScroller
        class="scroller"
        :items="items"
        :item-size="50"
        key-field="id"
        v-slot="{ item }"
      >
        <div class="user">{{ item.name }} - {{ item.email }}</div>
      </RecycleScroller>
    </div>
    <div>
      <LargeDataViewer />
    </div>
    <div>
      <ul>
        <li>1. pc端使用分页:</li>
        <li>每页渲染10条,当渲染下一页的数据直接将上一页的数据覆盖掉</li>
      </ul>
      <br /><br />
      <ul>
        <li>2. 虚拟列表:</li>
        <li>
          可视区域渲染:
          长列表10000条数据,并不会创建100000个dom,而是只会创建固定的例如20dom,当滚动的时候,将可视区域dom进行销毁重新创建,
          vue借助vue-virtual-scroller
        </li>
        <li>
          虚拟滚动是一种只渲染可见区域 DOM
          元素的技术，而不是渲染整个列表，无论列表数据有多大。
        </li>
      </ul>
      <br /><br />
      <ul>
        <li>完整技术栈优势</li>
        <li>Web Worker：后台线程处理数据，避免阻塞 UI</li>
        <li>虚拟滚动：高效渲染大量数据项</li>
        <li>TypeScript：类型安全的消息通信</li>
        <li>Vue 3 Composition API：逻辑清晰的组织方式</li>
      </ul>
      <br /><br />
    </div>
  </div>
</template>

<style scoped>
.scroller {
  height: 200px;
}

.user {
  height: 50px;
  padding: 10px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}
</style>
